<template>
  <div class="articleList" @scroll="scrollEvent" ref="articleList">
    <!-- 下拉刷新
             1：相应数据处理
             2：将v-model的值变成false
    -->
    <van-pull-refresh v-model="isLoading" @refresh="refresh">
      <van-list
        v-if="showList"
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="getData"
      >
        <!-- load方法需要干什么：
              1：调用接口
              2：调用完成将loading的值变成false
              3:数据累加
              4：下一页接口调用条件改变
              5:判断是否全部加载 完成，如果完成：finished=true

    -->
        <div
          class="item"
          v-for="item in list"
          :key="item.art_id"
          @click="$router.push('/article?id=' + item.art_id)"
        >
          <div class="title">{{ item.title }}</div>
          <div class="img">
            <img
              v-for="(i, index) in item.cover.images"
              :key="index"
              class="img-item"
              :style="{ width: (1 / item.cover.images.length) * 100 + '%' }"
              :src="i"
              alt=""
            />
          </div>
          <div class="bottom">
            <div class="name">{{ item.aut_name }}</div>
            <div class="comment">{{ item.comm_count }}评论</div>
            <!-- 过滤器：filter
            全局过滤器
               Vue.filter('方法名',(str)=>{
                return 值
               })

               {{ str实参值 | 方法名 }}
            局部过滤器
             filters:{
                方法名(str){
                    return 值
                }
             }
              {{ str实参值 | 方法名 }}

            作用：字符加工
            特点：
                不能直接使用this
                只能用于v-bind与{{  }}

           moment
             1:下载  npm i moment -f
             2:导入
                import moment from 'moment'
             3:设置语言： moment.locale('zh-cn')
             4:使用
                moment(时间).fromNow()
        -->
            <div class="time">{{ item.pubdate | formatDate }}</div>
            <div class="close">X</div>
          </div>
        </div>
      </van-list>
    </van-pull-refresh>
  </div>
</template>
<script>
import { articles } from '@/api/home'
// import moment from 'moment'
// moment.locale('zh-cn') // 设置moment为中文使用
export default {
  props: {
    id: {
      type: Number,
      required: true
    }
  },
  // filters: {
  //   formatTime (str) {
  //     return moment(str).fromNow()
  //   }
  // },
  data () {
    return {
      list: [],
      loading: false,
      finished: false,
      timestamp: Date.now(),
      isLoading: false,
      showList: true,
      scrollTop: 0
    }
  },
  created () {
    // this.getData()
  },
  methods: {
    async getData () {
      const res = await articles({
        channel_id: this.id,
        timestamp: this.timestamp
      })
      // loading的值变成false
      this.loading = false
      // 数据累加
      this.list.push(...res.data.results)
      // 下一页接口调用的条件改变
      this.timestamp = res.data.pre_timestamp
      // 判断是否加载完成
      if (res.data.pre_timestamp === null) {
        this.finished = true
      }
      console.log('列表', res)
    },
    // 下拉刷新方法
    refresh () {
      this.list = []
      this.loading = false
      this.finished = false
      this.timestamp = Date.now()
      this.showList = false
      this.$nextTick(() => {
        this.showList = true
        this.isLoading = false
      })
    },
    // 滚动事件
    scrollEvent (e) {
      this.scrollTop = e.target.scrollTop
      // console.log(e.target.scrollTop)
    }
  },
  activated () {
    // 还原滚动条的位置
    this.$refs.articleList.scrollTop = this.scrollTop
  }
}
</script>
<style lang="less" scoped>
.articleList {
  padding: 0 15px;
  width: 100vw;
  position: fixed;
  top: 86px;
  bottom: 48px;
  overflow: auto;
  box-sizing: border-box;
  .item {
    padding: 15px 0;
    .title {
      font-size: 14px;
      padding-bottom: 15px;
    }
    .img {
      display: flex;
      align-items: center;
      .img-item {
        width: 100%;
        padding: 0 10px;
        box-sizing: border-box;
      }
    }
    .bottom {
      display: flex;
      color: #969799;
      font-size: 14px;
      padding-top: 15px;
      .comment {
        margin: 0 15px;
      }
      .time {
        flex: 1;
      }
    }
  }
}
</style>
